/**
* 初始化设置
*/
<template>
    <vp-main-page>
        <template #table>
            <vp-table :data="types" stripe border style="width: 100%" row-key="id"
                :height="`calc(100vh - 156px - 16px)`" default-expand-all
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column type="index" align="center" label="#">
                </el-table-column>
                <el-table-column :label="$t('systemThreshold.name')" prop="key" show-overflow-tooltip>
                    <template #header><vp-label zh="项目" en="Item" /></template>
                    <template #default="scope">
                        {{ scope.row.zh + "/" + scope.row.en }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('systemThreshold.v1')" width="150" show-overflow-tooltip>
                    <template #header>
                        <vp-label-operations />
                    </template>
                    <template #default="scope">
                        <el-space>
                            <vp-btn-view text @click="handleEdit(scope.row, 'view')"></vp-btn-view>
                            <vp-btn-edit text v-auth="'systemCustomize.edit'" @click="handleEdit(scope.row, 'edit')" />
                        </el-space>
                    </template>
                </el-table-column>
            </vp-table>
        </template>
        <!-- 质量安全通告-通告类型设置 -->
        <QualitySafetyNoticeTypeSetting ref="QualitySafetyNoticeTypeSettingRef" />
        <!-- 培训满意度问卷项目 -->
        <TrainingSatisfactionItemTemplate ref="trainingSatisfactionItemTemplateRef" />
    </vp-main-page>
</template>
<script setup lang="ts" name="systemCustomize">
import { defineAsyncComponent, ref } from 'vue';

const QualitySafetyNoticeTypeSetting = defineAsyncComponent(() => import('./component/QualitySafetyNoticeTypeSetting.vue'));
const TrainingSatisfactionItemTemplate = defineAsyncComponent(() => import('./component/TrainingSatisfactionItemTemplate.vue'));

const types = [
    {
        key: "QUALITY_SAFETY_NOTICE_TYPE",
        zh: "质量安全通告-通告类型",
        en: 'Quality and Safety Notice - Notice Type',
    },
    {
        key: "TRAINING_SATISFACTION_ITEM",
        zh: "培训满意度问卷项目",
        en: 'Training Satisfaction Questionnaire Item',
    },
];

const handleEdit = (row: any, type: string) => {
    getRef(row.key)?.handleOpen({
        zh: row.zh,
        en: row.en,
        key: row.key,
        type: type
    })
}

const QualitySafetyNoticeTypeSettingRef = ref();
const trainingSatisfactionItemTemplateRef = ref();

const getRef = (key: string) => {
    if (key === 'QUALITY_SAFETY_NOTICE_TYPE') {
        return QualitySafetyNoticeTypeSettingRef.value;
    } else if (key === 'TRAINING_SATISFACTION_ITEM') {
        return trainingSatisfactionItemTemplateRef.value;
    } 
}

</script>
